<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>DeepSeek Chat</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1a73e8;
            --user-bg: #e8f0fe;
            --assistant-bg: #f8f9fa;
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        * {
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }

        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .header {
            background: var(--primary-color);
            color: white;
            padding: 20px;
            text-align: center;
        }

        .chat-area {
            height: 60vh;
            padding: 20px;
            overflow-y: auto;
            background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
        }

        .message {
            margin: 15px 0;
            display: flex;
            animation: fadeIn 0.3s ease-in;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message .bubble {
            max-width: 70%;
            padding: 12px 18px;
            border-radius: 20px;
            line-height: 1.5;
            position: relative;
        }

        .user .bubble {
            background: var(--user-bg);
            color: #1a73e8;
            border-bottom-right-radius: 4px;
        }

        .assistant .bubble {
            background: var(--assistant-bg);
            color: #333;
            border-bottom-left-radius: 4px;
        }

        .role-label {
            font-size: 0.8em;
            color: #666;
            margin-bottom: 4px;
            display: block;
        }

        .input-area {
            padding: 20px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
        }

        input[type="text"] {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 25px;
            font-size: 16px;
            transition: all 0.3s;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
        }

        button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        button:hover {
            background: #1557b0;
            transform: translateY(-1px);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 加载状态样式 */
        .thinking .content {
            color: #666;
            font-style: italic;
        }

        .thinking::after {
            content: '...';
            animation: dots 1.5s infinite;
        }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60% { content: '...'; }
            80%, 100% { content: ''; }
        }

        /* 滚动条样式 */
        .chat-area::-webkit-scrollbar {
            width: 8px;
        }

        .chat-area::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .chat-area::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
        }

        /* 隐藏模板 */
        .message-template {
            display: none !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>AI 助手测试</h1>
    </div>

    <div class="chat-area" id="chatArea">
        <!-- 消息模板 -->
        <div class="message-template message">
            <div class="bubble">
                <span class="role-label"></span>
                <span class="content"></span>
            </div>
        </div>

        <!-- 历史消息 -->
        <div th:each="msg : ${messages}" class="message" th:classappend="${msg.role}">
            <div class="bubble">
                <span class="role-label" th:text="${msg.role} == 'user' ? 'user' : 'assistant'"></span>
                <span class="content" th:text="${msg.content}"></span>
            </div>
        </div>
    </div>

    <form class="input-area" id="chatForm">
        <input type="text" id="userInput" placeholder="输入消息..." required autofocus>
        <button type="submit">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
            发送
        </button>
    </form>
</div>

<script>
    // 自动滚动到底部
    function scrollToBottom() {
        const chatArea = document.getElementById('chatArea');
        chatArea.scrollTop = chatArea.scrollHeight;
    }

    // 创建新消息
    function createMessage(role, content) {
        const template = document.querySelector('.message-template');
        const newMsg = template.cloneNode(true);
        newMsg.classList.remove('message-template');
        newMsg.classList.add(role);
        newMsg.querySelector('.role-label').textContent = role === 'user' ? 'you' : 'AI';
        newMsg.querySelector('.content').textContent = content;
        return newMsg;
    }

    // 处理表单提交
    document.getElementById('chatForm').addEventListener('submit', async (e) => {
        e.preventDefault();

        const input = document.getElementById('userInput');
        const userMessage = input.value.trim();
        if (!userMessage) return;

        // 立即显示用户消息
        const chatArea = document.getElementById('chatArea');
        const userBubble = createMessage('user', userMessage);
        chatArea.appendChild(userBubble);
        input.value = '';
        scrollToBottom();

        try {
            // 显示加载状态
            const loadingMsg = createMessage('assistant', '思考中');
            loadingMsg.querySelector('.content').classList.add('thinking');
            chatArea.appendChild(loadingMsg);
            scrollToBottom();

            // 发送请求
            const response = await fetch('/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `userInput=${encodeURIComponent(userMessage)}`
            });

            if (!response.ok) throw new Error('请求失败: ' + response.status);

            // 替换加载状态为真实响应
            const html = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newMessages = doc.querySelectorAll('#chatArea > .message');

            // 移除加载状态
            chatArea.removeChild(loadingMsg);
            console.log("test" + html)
            // 添加最新消息
            let i = 1;
            newMessages.forEach(msg => {
                console.log(newMessages.length);
                if (i == newMessages.length) {
                    console.log(1);
                    const content = msg.querySelector('.content').textContent;
                    const assistantMsg = createMessage('assistant', content);
                    chatArea.appendChild(assistantMsg);
                }
                i++;
                // if (msg.querySelectorAll('.assistant')) {
                //     console.log(1);
                //     const content = msg.querySelector('.content').textContent;
                //     const assistantMsg = createMessage('assistant', content);
                //     chatArea.appendChild(assistantMsg);
                // }
            });

        } catch (error) {
            const errorMsg = createMessage('system', `错误: ${error.message}`);
            chatArea.appendChild(errorMsg);
        }

        scrollToBottom();
    });

    // 初始自动滚动
    scrollToBottom();
</script>
</body>
</html>